<template>
  <div class="news">
    <!-- 头部 -->
    <div class="news_top">
      <span class="iconfont icon-guanbi" @click="$router.go(-1)"></span>
      <span>资讯详情</span>
    </div>
    <!-- 标题 -->
    <div class="news_title">
      <p>Deft“高龄”夺冠，说明了什么？有哪些选手退役早了，留有遗憾？</p>
    </div>
    <!-- 新闻作者 -->
    <div class="news_author">
      <div class="img">
        <img
          src="https://inews.gtimg.com/newsapp_ls/0/10801646753_200200/0"
          alt=""
        />
        <p>
          <img
            src="https://inews.gtimg.com/newsapp_ls/0/14876051701/0"
            alt=""
          />
        </p>
      </div>
      <div class="text">
        <p>Aggro电竞</p>
        <p>2022年11月10日18:30</p>
      </div>
    </div>

    <!-- 内容 -->
    <div class="news_content">
      <p>
        随着DRX战队，以四号种子的身份，苦战五局先输后赢的艰难击败了Faker率领的T1战队之后。英雄联盟S12全球总决赛，就正式宣告结束了。在本届世界赛上，LCK再次上演了围剿LPL的四强战，也再次达成了包揽冠亚军的战绩。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419335402/1000" alt="" />
    </div>

    <!-- 内容 -->
    <div class="news_content">
      <p>
        那么在LCK再次包揽S赛冠军之后，我们除了恭喜DRX之外，囧王者还是想和大家一起来聊一聊羊驼Def的故事。这一次，咱们不聊别的，只聊他这么多年的逐梦精神，以及他和Faker同为26岁“高龄”，却无视电竞选手年龄的天花板，依旧吊打一众年轻的超新星。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419335414/1000" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        而且今年Deft夺冠，Faker再获得亚军的成绩，也让许多玩家感到意外。原来在很吃手速和反映的电竞领域，大家一直以为的年龄，其实不是让选手退役的主要原因。相较于Deft在26岁“高龄”仍然能夺冠，那么有哪些“以年龄大”为由退役的选手，会让大家觉得惋惜呢？
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419335419/1000" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        写在最前面，囧王者认为Deft自从S3出道，辗转LPL和LCK两大赛区九年，他在每个队伍基本都能拿高薪，打首发，完全没有出现过“竞争不过年轻人，只是靠资历和流量混住一个位置”的情况，这其实是和他的职业态度和坚持是分不开的
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419335438/1000" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        不仅如此，在姜子牙被优化重做之后，其数个皮肤也得到了相应的调整和优化。比如原来身为伴身皮肤的“时尚教父”，在姜子牙重做之后就成为了勇者品质的皮肤，并且拥有了全款蓝色的伴生特效。包括炽热元素使这款活动皮肤，在姜子牙重做也得到了特效品质上的改变和提升。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419335429/1000" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        老实说，Deft，Faker和Rookie这些的大龄选手，他们和自己的巅峰期相比，水平其实是真的下滑了挺多的。也经常出现打不过年轻选手的情况。但如果真要说能稳稳压制他们的选手，其实也不多，这些老将的整体实力，绝对的还是中上水平，还是在线的。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419335428/1000" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        只不过FPX在S9夺冠后，在S10的战绩却大失水准，以至于FPX在S11试图补强，买来了S10冠军战队DK的上单牛国瑞取代金贡打上单。后面的FPX的遭遇大家也看到了，S11的FPX先赢后输，以一种大家看不懂的方式，止步小组赛！金贡随后也在2021年12月27日，宣布退役。老实说，以金贡当时的实力，作为一名抗压型上单，还是可以继续打比赛的！
      </p>
    </div>

    <!-- 评论 -->
    <div class="news_commit">
      <div class="news_commit_top">
        <div class="left">评论</div>
        <div class="right">{{ news_commit_content_lists.length }}条评论</div>
      </div>
      <div class="news_commit_content">
        <div
          class="news_commit_content_item"
          v-for="item in news_commit_content_lists"
          :key="item.id"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="text">
            <p>{{ item.name }}</p>
            <p>
              <span>{{ item.content }}</span>
              <span
                class="iconfont icon-dianzan"
                v-if="!item.checked"
                @click="commit_toggle(item.id)"
              ></span>
              <span
                class="iconfont icon-dianzan_kuai"
                v-if="item.checked"
                @click="commit_toggle(item.id)"
              ></span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入的评论 -->
    <div class="news_commit_input">
      <input
        type="text"
        placeholder="请发表你的评论"
        v-model="commit_info"
        @keydown.enter="add_commit"
      />
      <p @click="add_commit">发表</p>
    </div>

    <!-- 信息列表 -->
    <div class="info_item" v-for="item in whole" :key="item.id">
      <div class="info_item_left">
        <p>{{ item.introduce }}</p>
        <p>
          <span>{{ item.author }}</span>
          <span>{{ item.time }}</span>
        </p>
      </div>
      <div class="info_item_right">
        <img :src="item.img" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { getInfodetailsData } from "../api/home.js";
export default {
  data() {
    return {
      news_commit_content_lists: [
        {
          id: 1,
          img: "https://thirdqq.qlogo.cn/g?b=oidb&k=r2epib7Jf7hGgtZHnNZh3ag&s=100&t=1664988549",
          name: "中分背带裤",
          content: "好看",
          checked: false,
        },
        {
          id: 2,
          img: "https://panqiu8-1309958500.cos.ap-guangzhou.myqcloud.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221029101636.jpg",
          name: "大泽哥",
          content: "不错",
          checked: false,
        },
      ],
      commit_info: "",
      commit_id: 10,
      whole: null,
    };
  },
  methods: {
    // 点赞切换
    commit_toggle(id) {
      let index = this.news_commit_content_lists.findIndex(
        (item) => item.id == id
      );
      this.news_commit_content_lists[index].checked =
        !this.news_commit_content_lists[index].checked;
      if (this.news_commit_content_lists[index].checked) {
        this.$toast("点赞成功");
      } else {
        this.$toast("取消点赞");
      }
    },
    //添加评论
    add_commit() {
      let name = this.commit_info;
      this.news_commit_content_lists.push({
        id: this.commit_id,
        img: "https://img2.baidu.com/it/u=2483610998,3588558036&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668186000&t=b5a28ce019027131c469023389fb6bc9",
        name: "坤坤",
        content: name,
        checked: false,
      });
      this.commit_info = "";
      this.commit_id += 1;
      this.$toast("评论成功");
    },
  },
  created() {
    getInfodetailsData().then((data) => {
      console.log(data);
      this.whole = data;
    });
  },
};
</script>

<style lang="scss" scoped>
// 输入的评论
.news_commit_input {
  padding: 15px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    flex: 1;
    border: none;
    color: #adadad;
    background: #ebebeb;
    padding: 8px 0;
    border-radius: 20px;
    text-indent: 15px;
  }
  p {
    padding: 8px;
  }
}

// 评论
.news_commit {
  .news_commit_top {
    display: flex;
    padding: 10px 15px;
    padding-top: 5px;
    padding-bottom: 0;
    align-items: center;
    .left {
      color: #191919;
      font-weight: 700;
      font-size: 20px;
    }
    .right {
      color: #ccc;
      font-size: 16px;
      margin-left: 10px;
    }
  }
  .news_commit_content {
    padding: 15px;
    .news_commit_content_item {
      display: flex;
      margin-bottom: 10px;
      .img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.08);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 10px;
        flex: 1;
        p {
          &:nth-child(1) {
            font-weight: 700;
            font-size: 14px;
          }
          &:nth-child(2) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            .iconfont {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
.news {
  position: relative;
}
// 头部
.news_top {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  padding: 15px 0;
  display: flex;
  align-items: center;
  z-index: 999;
  background-color: #ffa200;
  color: #ffffff;
  span {
    &:nth-child(1) {
      font-size: 22px;
      margin-left: 12px;
    }
    &:nth-child(2) {
      text-align: center;
      flex: 1;
    }
  }
}
// 标题
.news_title {
  margin-top: 52px;
  padding-left: 15px;
  padding-right: 15px;
  p {
    font-family: "PingFang SC", Helvetica, Arial, "微软雅黑", "黑体";
    color: var(--t1);
    font-weight: 600;
    padding: 5px 0;
    font-size: 18px;
  }
}
// 新闻作者
.news_author {
  display: flex;
  padding: 0 15px;
  margin: 15px 0;
  .img {
    width: 36px;
    height: 36px;
    position: relative;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 12px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .text {
    flex: 1;
    p {
      &:nth-child(1) {
        font-weight: 500;
        height: 16px;
        line-height: 16px;
        font-size: 14px;
      }
      &:nth-child(2) {
        color: #a6a6a6;
        font-size: 14px;
        height: 18px;
        line-height: 18px;
      }
    }
  }
}
// 内容
.news_content {
  padding: 0 15px;
  margin: 10px 0;
  p {
    font-size: 18px;
    line-height: 29px;
    color: #222;
  }
}
// 图片
.news_img {
  width: 345px;
  height: 189px;
  padding: 0 15px;
  margin: 10px 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.info_item {
  display: flex;
  padding: 0 10px;
  margin: 10px 0;
  .info_item_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      &:nth-child(1) {
        font-size: 14px;
        color: rgb(34, 34, 34);
        font-weight: 600;
        font-family: 黑体;
      }
      &:nth-child(2) {
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(120, 122, 130);
          font-size: 13px;
          transform: scale(0.85, 0.85);
        }
      }
    }
  }
  .info_item_right {
    border-radius: 10px;
    overflow: hidden;
    width: 117px;
    height: 80px;
    margin-left: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
